<template>
  <div>
    <el-row>
      <!-- <el-button size="mini" type="info" @click="doprintsee">打印预览</el-button> -->
      <el-button size="mini" type="success" @click="doprint">打印</el-button>
    </el-row>
    <div v-show="false">
      <div id="printrecord1">
        <!-- <div v-for="item in tableData2" :key="item" class="fuji">
          <p align="center" style="font-size:24px;margin:50px 0 20px 0;">人员业绩登记表</p>
          <el-table
            :data="item"
            :cellStyle="rowStyle"
            :headerCellStyle="tableHeaderColor"
            style="width: 600px; border:1px solid #333;"
          >
            <el-table-column align="center" width="121px" prop="hash.grantime" label="取得日期"></el-table-column>
            <el-table-column align="center" width="477px" prop="hash.content" label="获得业绩"></el-table-column>
          </el-table>
          <div style="height:80px;"></div>
        </div> -->
        <p style="display:flex;justify-content:flex-end">
          <span style="margin-right:20px;font-size:16px">JBR/QR18-1C</span>
        </p>
        <table width="99%">
          <thead>
            <tr style="border:0">
              <th colspan="4" style="border:0;height:50px;line-height:50px;font-size:20px;text-align:center;font-weight:600;color:#333">人员业绩登记表</th>
            </tr>
            <tr>
              <th style="width:200px">取得日期</th>
              <th>获得业绩</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index" style="height:60px">
              <td>{{item.hash.grantime}}</td>
              <td>{{item.hash.content}}</td>
            </tr>

          </tbody>
        </table>
      </div>
    </div>
    <!-- <el-dialog :visible.sync="dialogVisible" width="700px">

    </el-dialog>-->
    <el-divider></el-divider>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column align="center" type="index" width="50" v-if="!ischeck"></el-table-column>
      <el-table-column align="center" prop="hash.username" label="人员姓名"></el-table-column>
      <el-table-column align="center" prop="hash.grantime" label="取得日期"></el-table-column>
      <el-table-column align="center" prop="hash.content" label="获得业绩"></el-table-column>
    </el-table>
    <el-pagination
      v-if="!ischeck"
      @current-change="handleCurrentChange"
      :currentPage.sync="pagobj.currentPage3"
      :pageSize="pagobj.pagesize"
      layout="total, prev, pager, next"
      :total="pagobj.total"
      style="margin:20px 0;text-align:center"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      ts: this.newStore(),
      tableData2: [],
    };
  },
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    pagobj: {
      type: Object,
      required: true,
    },
    ischeck: Boolean,
  },
  // created() {
  //   for (let i = 0; i < this.tableData.length; i += 17) {
  //     let arr1 = [];
  //     arr1 = this.tableData.slice(i, i + 17);
  //     this.tableData2.push(arr1);
  //   }
  // },

  methods: {
    rowStyle({
      row, column, rowIndex, columnIndex,
    }) {
      if (columnIndex !== 0) {
        return 'border-top:1px solid #333;border-left:1px solid #333;';
      }
      return 'border-top:1px solid #333';
    },

    // 修改table header的样式
    tableHeaderColor({
      row, column, rowIndex, columnIndex,
    }) {
      if (rowIndex === 0 && columnIndex !== 1) {
        return 'border-right:2px solid #333';
      }
    },
    handleCurrentChange() {
      this.$parent.getperlist3();
    },
    doprintsee() {
      this.dialogVisible = true;
    },
    doprint() {
      if (this.tableData.length == 0) {
        this.$message({
          type: 'error',
          message: ' 暂无可打印数据',
        });
        return;
      }
      this.$nextTick(() => {
        const detailContent = document.getElementById('printrecord1');
        Print('#printrecord1');
      });
    },
  },
};
</script>
<style scoped>
.tankuang {
  font-size: 24px;
  font-family: "宋体";
}
table {
  text-align: center;
  padding-left: 30px;
  border-collapse: collapse;
}
table td,
th {
  border: 1px solid #333;
  font-size: 14px;
  height: 40px;
  font-weight: normal
}
</style>
